<template>
  <div class="daily-container">
    <full-calendar :events="monthData" class="test-fc"
            first-day='1' locale="ch"
            @changeMonth="changeMonth"   
            @eventClick="eventClick"      
            @dayClick="dayClick"          
            @moreClick="moreClick" />
            
   

    <el-dialog
      title="日报填写"
      :visible.sync="dailyisShow"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="sub-title">项目名称</div>
          <el-select v-model="daylyMessage.proName" placeholder="项目名称" @click="getproName()">
            <el-option
              v-for="item in proNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="6">
          <div class="sub-title">任务名称</div>
          <el-select v-model="daylyMessage.taskName" placeholder="任务名称">
            <el-option
              v-for="item in taskNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="6">
            <div class="sub-title">工时</div>
            <el-input v-model="daylyMessage.workTime" placeholder="请输入内容"></el-input>
        </el-col>
       <el-col :span="2">
          <i class="el-icon-circle-plus-outline addIcon" />
       </el-col>
      </el-row>
      <hr style="margin-top:30px;" />
      
      <el-row :gutter="30">
        <h3 style="padding-left: 15px;">日报内容</h3>
        <el-col :span="24">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="daylyMessage.textareaCon">
          </el-input>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <h3 style="padding-left: 15px;">抄送人</h3>
        <el-col :span="30">
          <el-select v-model="daylyMessage.aboutName" placeholder="任务名称" @change="sendPerson">
            <el-option
              v-for="item in aboutproson"
              :key="item.value"
              :label="item.label"
              :value="item"
              >
            </el-option>
          </el-select>
        </el-col>
        
        <!-- 抄送人列表 -->
        <el-col :span="10">
          <el-tag
            style="margin:4px;"
            v-for="tag in tags"
            :key="tag.value"
            closable
            @close="delTag(tag)"
            type="success">
            {{tag.label}}
          </el-tag>
        </el-col>
      </el-row>
      
      <span slot="footer" class="dialog-footer">
        <div class="footerDate">{{daylyMessage.startTime?daylyMessage.startTime:'日期显示异常'}}</div>
        <!-- <el-button @click="dailyisShow = false">取 消</el-button> -->
        <el-button type="primary" @click="dailySubmit">提交</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>

<script>
import FullCalendar from './src/fullCalendar.vue'
export default {
  name: 'daily',
  components: {
    'full-calendar': FullCalendar
  },
  data() {
    return { 
        monthData: [
            {
            title : 'eeeeeeeeeasdddddddddddddddddddddddddddddd',  
            start : '2021-06-20', 
            end : '2021-06-20',   
            cssClass: 'red'       
            },
            {
            title : 'sssss',
            start : '2021-06-21',
            end : '2021-06-22',
            cssClass: 'blue'  
            },
            {
            title : 'dddddddd',
            start : '2021-06-22',
            end : '2021-06-22',
            cssClass: 'blue'  
            }
        ],
        dailyisShow: false,
        daylyMessage: {
          proName: '',
          taskName: '',
          startTime: '',
          endTime: ''
        },
        proNameList: [
          {value: 1, label: '外卖系统'},{value: 2, label: '超市APP'},{value: 3, label: '商城小程序'}
        ],
        taskNameList: [
          {value: 1, label: '外卖系统数据'},{value: 2, label: '超市AP萨达P'},{value: 3, label: '商城小程阿萨德序'}
        ],
        aboutproson: [
          {value: 1, label: '张三'},{value: 2, label: '李四'},{value: 3, label: '王五'}
        ],
        //抄送人列表
        tags: [
          { label: '标签二', value: 10},
          { label: '标签三', value: 20},
        ]

    }
  },
  mounted() {
    
  },
  methods: {
      changeMonth (start, end, current) {
       console.log('changeMonth', start, end, current)
      },
      // 点击事件
      eventClick (event, jsEvent, pos) {
        console.log('点击事件', event, jsEvent, pos)
      },
      // 点击当天
      dayClick (day, jsEvent) {
        this.dailyisShow = true
        const d = new Date(day)
        const strMonth = d.getFullYear() +'-' +  this.addZeroPrefixForMonth(d.getMonth() + 1) + '-' + this.addZeroPrefixForMonth(d.getDate())
        this.daylyMessage.startTime = strMonth
        console.log('dayClick',strMonth)
      },
      addZeroPrefixForMonth: function (month){
        return month < 10 ? '0' + month : month
      },
      // 查看更多
      moreClick (day, events, jsEvent) {
        console.log('moreCLick', day, events, jsEvent)
      },

      // 日报提交
      dailySubmit() {
        console.log(this.daylyMessage)
        this.dailyisShow = false
      },
      //抄送人删除
      delTag (tag) {
        this.tags.forEach(item => {
          if (item.value == tag.value) {
              const idx = this.tags.indexOf(tag)
              this.tags.splice(idx,1)
          }
        })
      },
      sendPerson (e) {
        console.log(e)
        let istag = true;
        this.tags.forEach(item => {
          if (item.value == e.value) {
             istag = false
             return   
          }
        })
        if (istag) {
          this.tags.push(e)
        } else {
          this.$message('抄送人已存在');
        }
        
      },
      getproName () {

      }
  }
}
</script>

<style lang="scss" scoped>
 .el-dialog .el-dialog__header .el-dialog__body::deep{
    padding: 0 20px ;
  }
  .sub-title{
    font-weight: 800;
    padding: 10px;
  }

  .addIcon{
    font-size: 30px;
    margin-top: 40px;
    color: rgb(0, 255, 13);
    cursor: pointer;
  }
  .addIcon:active{
    color: rgb(145, 255, 150);
  }
  .secdIcon{
    font-size: 30px;
  }

  .daylityCont{}
  .textareaCon{
    margin: 0 auto;
  }



  .dialog-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .footerDate{
      color: red;
      font-size: 18px;
    }
  }
  
</style>